<template>
  <div class="select-filter">
    <div
      v-if="!data.length || $slots.empty"
      class="select-filter--empty"
    >
      <slot name="empty">
        <el-empty
          :description="emptyText"
          :image-size="68"
        />
      </slot>
    </div>
    <div
      v-for="item in data"
      :key="item.key"
      class="select-filter--item"
    >
      <div class="select-filter--item-title">
        <label>{{ item.title }}：</label>
      </div>

      <div class="select-filter--item-options">
        <ul>
          <li
            v-for="option in item.options"
            :key="option.value"
            :class="{
              'active': option.value === selected[item.key] ||
                (isArray(selected[item.key]) && selected[item.key].includes(option.value))
            }"
            :style="itemStyle"
            @click="handleSelect(option, item)"
          >
            <icon
              v-if="option.icon"
              :name="option.icon"
              :type="option?.iconType || ICON_TYPE.EL_ICON"
            />
            <span>{{ option.label }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCssPropertyValue, addUnit } from '@/app/style'
import { isArray } from '@/utils/type'
import { ICON_TYPE, cssVars } from '@/const'

const {
  data,
  selectedValues,
  activeColor,
  activeBgColor = getCssPropertyValue('--el-color-primary'),
  radius,
} = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  selectedValues: {
    type: Object,
    default: () => ({}),
  },
  itemStyle: {
    type: Object,
    default: () => ({}),
  },
  emptyText: {
    type: String,
    default: '暂无数据',
  },
  activeColor: {
    type: String,
    default: cssVars.colorWhite,
  },
  activeBgColor: String,
  radius: {
    type: [String, Number],
    default: 32,
  },
})
const emit = defineEmits(['change'])

const selected = ref({})

const borderRadius = computed(() => {
  const round = +radius
  const maxValue = 32 // 最大圆角值
  const minValue = 4 // 最小圆角值

  if (round > maxValue) return addUnit(maxValue)
  if (round < minValue) return addUnit(minValue)
  return addUnit(round)
})

onMounted(() => init(data, selectedValues))

watch(
  () => data,
  (newVal) => init(newVal, selectedValues),
)

function handleSelect(option, item) {
  // 多选
  if (item.multiple) {
    // 如果多选选择的第一个
    if (option.value === item.options[0].value) {
      // 就赋值第一个的值
      selected.value[item.key] = [option.value]
    } else {
      // 如果选择的值已有
      if (selected.value[item.key].includes(option.value)) {
        //删除选择的值
        selected.value[item.key].splice(selected.value[item.key].findIndex((i) => i === option.value), 1)
        // 当全删光时，把第一个选中
        if (selected.value[item.key].length === 0) {
          selected.value[item.key] = [item.options[0].value]
        }
      } else {
        // 未有值的时候，追加选中值
        selected.value[item.key].push(option.value)
        // 当含有第一个的值的时候，把第一个删除
        if (selected.value[item.key].includes(item.options[0].value)) {
          selected.value[item.key].splice(selected.value[item.key].findIndex((i) => i === item.options[0].value), 1)
        }
      }
    }
  } else {
    // 单选时，如果点击了已有值就赋值
    if (selected.value[item.key] !== option.value) {
      selected.value[item.key] = option.value
    }
  }

  emit('change', selected.value)
}

function init(list, values) {
  list.forEach((item) => {
    selected.value[item.key] = values[item.key] ||
      (isArray(item.options) && item.options.length) ? [item.options[0]?.value] : []
  })

}
</script>

<style scoped lang="scss">
.select-filter {
  width: 100%;

  &--item {
    border-bottom: 1px dashed var(--el-border-color-light);
    margin-bottom: 10px;

    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    &-title {
      label {
        display: inline-block;
        font-size: $font-size-medium;
        color: var(--el-text-color-regular);
        white-space: nowrap;
      }
    }

    &-options {
      flex: 1;
      margin-bottom: 5px;

      ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: $space-small-s;
      }

      li {
        list-style: none;
        cursor: pointer;
        padding: 5px $space-small;
        border-radius: v-bind(borderRadius);
        margin: 0 $space-small-s $space-small-s 0;
        font-size: 13px;
        display: flex;
        align-items: center;
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        border: 1px solid var(--el-color-primary-light-5);
        transition: background-color 0.3s, border-color 0.3s, color 0.3s;

        &:hover {
          background-color: v-bind(activeBgColor);
          color: v-bind(activeColor);
        }

        &.active {
          background-color: v-bind(activeBgColor);
          color: v-bind(activeColor);
          font-weight: bold;
          border: 1px solid v-bind(activeBgColor);
        }
      }

      .el-icon {
        margin-right: 3px;
      }
    }
  }

  &--empty {
    margin: $space-small 0;
    font-size: $font-size-medium;
    color: var(--el-text-color-regular);
  }
}
</style>
